<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
        <canvas id="c" width="800" height="600" style="border: 1px solid #ccc"></canvas>

        <script>
            const cnv = document.getElementById('c')
            const ctx = cnv.getContext('2d')
            ctx.moveTo(10, 150)
            ctx.lineTo(600, 150)

            ctx.stroke()

            ctx.font = '16px Arial'
            ctx.textBaseline = 'alphabetic'
            ctx.fillText('你好 alphabetic', 10, 150)

            ctx.textBaseline = 'top'
            ctx.fillText('你好 top', 110, 150)

            ctx.textBaseline = 'bottom'
            ctx.fillText('你好 bottom', 210, 150)

            ctx.textBaseline = 'middle'
            ctx.fillText('你好 middle', 310, 150)

            ctx.textBaseline = 'hanging'
            ctx.fillText('你好 hanging', 410, 150)
        </script>
    </body>
</html>
